<!-- src/components/MotivationalQuote.vue -->
<template>
    <div class="quote-container">
      <div class="logo"><i class="iconfont icon-logo"></i></div>
      <transition name="fade" mode="out-in">
        <div :key="currentIndex" class="quote-content">
          <h1>{{ currentQuote.title }}</h1>
          <p v-html="currentQuote.content"></p>
        </div>
      </transition>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import { motivationalQuotes } from '@/utils/motivationalQuotes'
  
  const currentIndex = ref(0)
  let interval = null
  const intervalTime = 9000 // 5秒切换一次
  
  const currentQuote = ref(motivationalQuotes[0])
  
  const getRandomQuote = () => {
    let newIndex
    do {
      newIndex = Math.floor(Math.random() * motivationalQuotes.length)
    } while (newIndex === currentIndex.value && motivationalQuotes.length > 1)
    
    currentIndex.value = newIndex
    currentQuote.value = motivationalQuotes[newIndex]
  }
  
  const startRotation = () => {
    interval = setInterval(getRandomQuote, intervalTime)
  }
  
  onMounted(() => {
    startRotation()
  })
  
  onUnmounted(() => {
    clearInterval(interval)
  })
  </script>
  
  <style scoped>
  .quote-container {
    text-align: center;
  }
  
  .logo {
    margin-bottom: 2rem;
  }
  
  .logo .iconfont {
    font-size: 4rem;
    color: var(--v-warning);
  }
  
  h1 {
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    color: white;
  }
  
  p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
  }
  
  /* 过渡动画 */
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s ease;
  }
  
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
    transform: translateY(10px);
  }
  </style>